<template>
<div id="app">
  <div class="search-bar">
    <div class="write">笔记管理</div>
    <input type="text" v-model="searchQuery" placeholder="输入检索笔记">
  </div>
  <div class="note-list">
    <ul>
      <li v-for="note in filteredNotes" :key="note.id">
        <div class="note-content" v-if="!note.editing">
          {{ note.content }}
          <button @click="editNote(note)">编辑</button>
          <button @click="deleteNote(note)">删除</button>
        </div>
        <div v-else>
          <textarea v-model="note.content"></textarea>
          <button @click="saveNote(note)">保存</button>
          <button @click="cancelEdit(note)">取消</button>
        </div>
      </li>
    </ul>
  </div>
  <div class="add-note">
    <textarea v-if="show" v-model="newNoteContent"></textarea>
  </div>
  <button style="margin-left:50%" @click="addNote">添加笔记</button>
</div>
</template>
<script  lang="ts" setup>
import {ref,computed} from 'vue'
const show = ref(false)
const notes = ref(JSON.parse(localStorage.getItem('notes')) || []);
    const newNoteContent = ref('');
    const searchQuery = ref('');

    const filteredNotes = computed(() => {
      return notes.value.filter(note => note.content.toLowerCase().includes(searchQuery.value.toLowerCase()));
    });

    function addNote() {
      if (newNoteContent.value.trim()) {
        notes.value.push({ id: Date.now(), content: newNoteContent.value, editing: false });
        saveNotes();
        newNoteContent.value = '';
      }
      show.value=true
    }

    function editNote(note) {
      note.editing = true;
    }

    function saveNote(note) {
      note.editing = false;
      saveNotes();
    }

    function cancelEdit(note) {
      note.editing = false;
    }

    function deleteNote(note) {
      notes.value = notes.value.filter(n => n !== note);
      saveNotes();
    }

    function saveNotes() {
      localStorage.setItem('notes', JSON.stringify(notes.value));
    }

</script>
<style scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-bar {
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  background-color: blue;
  width: 100%;
  height: 50px;
}

.note-list {
  width: 80%;
  max-width: 600px;
}

.note-list ul {
  list-style-type: none;
  padding: 0;
}

.note-list li {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.note-content {
  margin-bottom: 10px;
}

.add-note {
  margin-top: 20px;
}
.write {
    color:white;
    line-height: 50px;
    margin-left: 10px
}
.add-note textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}

button {
  padding: 5px 10px;
  margin-right: 5px;
  cursor: pointer;
}

@media (max-width: 600px) {
  .note-list {
    width: 95%;
  }
}
</style>